body{
    min-width:320px;
    max-width:540px;
    /* background-color: bisque; */
    margin: 0 auto;
}

/* 搜索栏 */
.search-index{
    display: flex;
    width:100%;
    height:44px;
    /* background-color: pink; */
}
.search{
    position: relative;
    flex:1;
    height:26px;
    line-height:26px;
    margin-top:12px;
    border: 1px solid grey;
    border-radius:10px;
}
.search::before{
    position: absolute;
    content:"";
    display:block;
    width: 17px;
    height: 19px;
    background: url(../images/sprite.png) no-repeat -58px -274px;
    background-size: 104px 328px;
}
.search span{
    margin-left: 20px;
}
.user{
    width: 44px;
    text-decoration: none;
    /* background-color: aquamarine; */
}
.user::before{
    /* 二倍图问题 :
    1.先将精灵图缩小为原来的二分之一
    2.测量所需精灵图图案大小，设置为宽高
    3测量图案在精灵图中位置，设置background-size为负的;
    4.设置 background-size为缩小后的精灵图大小*/
    content: "";
    display:block ;
    width: 30px;
    height: 22px;
    background: url(../images/sprite.png) no-repeat -53px -196px;
    background-size: 104px 328px;
    
}



/*轮播图栏 */
.banner img{
    width:100%;
}

/* local-nav导航栏部分 */
.local-nav {
    display:flex;

}
/* 这是关键！！！！！！！！！！！！！！！！！！！！！！！！！ */
.local-nav div{
    flex:1;
    display: flex;
    flex-direction: column;
    /* 在侧轴对齐方式 */
    align-items: center;
    /* 在主轴的对齐方式 */
    justify-content: center;
    text-align: center;
    /* padding-left: 20px; */
}
/* 这是关键！！！！！！！！！！！！！！！！！！！！！！！！！！ */
.local-nav div [class^="pic"]{
  
    display:block;
    width: 32px;
    height: 32px;
    background: url(../images/localnav_bg.png) ;
    background-size:32px 160px;

}
.local-nav div .pic1{
   
    background-position:  -32px -32px;
   

}

.local-nav div .pic2{
    
    background-position: -32px -64px;
    
}

.local-nav div .pic3{
    
    background-position:  -32px -96px;
    

}

.local-nav div .pic4{
    
    background-position: -32px -128px;
    

}
.local-nav div .pic5{
   
    background-position:  -32px -160px;
  

}

/* hotel部分 */
/* .outer{
    display:flex;
}
.outer div{
    flex:1;
    display: flex;
    justify-content: center;

}
.outer div:nth-child(1){
    width: 66px;
    height: 52px;
    background: url(../images/hotel.png) -53px -7px;
    background-size:182px 72px;
} */



/* hotel部分 */
.hotel .common{
   display: flex;
   height:88px;
   border-bottom:2px solid #fff ;
   border-radius: 10px;
   background-color: pink;
}
.hotel .common div{
    flex:1;
    display: flex;
    width:100%;
    
    flex-direction: column;
   justify-content: center;
   align-items:center;
   color:#fff;
}
.hotel .common div a{
    text-decoration: none;
    color: #fff;
}
.hotel .common .in{
    background: url(../images/hotel.png) no-repeat bottom center;
    background-size: 121px auto; 
}
.hotel .common>div{
    border-right:1px solid #fff ;
}
.common>div>div:first-child{
    border-bottom:1px solid #fff ;
}


.hotel .common:nth-child(1){
    background:-webkit-linear-gradient(left,#FA5A55,#FA994D) ;
}

.hotel .common:nth-child(2){
   background:-webkit-linear-gradient(left,#4B90ED,yellow)
}

.hotel .common:nth-child(3){
    background:-webkit-linear-gradient(left,green,aqua) ;
}



/* wifi模块 */
.wifi{
    padding: 0;
    display:flex;
    flex-wrap: wrap;
}
.wifi>li{
    flex:20%;
   list-style: none; 
   display: flex;
  flex-direction:column;
  align-items:center;
}
.wifi>li::before{
    content:"";
    display: block;
    width: 28px;
    height: 28px;
    background-color: pink;
    /* margin-top: 4px; */
    background: url(../images/subnav-bg.png) no-repeat;
    background-size: 28px auto;
}
.wifi>li>a{
   text-decoration: none;
   color: black;
}




/* 底部模块部分 */
.simple{
    display:flex;
}

.simple>a{
    flex:50%;
}
/* 图片得设置宽度 */
.simple a img{
    width: 100%;
}

/* 到最后真的，唉，有点难过，因为写的找不出哪里除了问题
，只想着快点解决，但就是找不到哪里出错了 */
